<template>
  <div v-loading="loading" class="main-container">
    <FiltrateHandleView :title="filterTitle" class="filtrate-bar" module-type="portrait"
                        @load="loading=true" @search="getDataList"/>
    <div class="content">
      <div class="axis-content">
        <div id="axismain"/>
      </div>
      <div class="table-content">
        <el-table :data="list" height="400" stripe border highlight-current-row>
          <template v-for="(item, index) in fieldList" :key="index">
            <el-table-column :fixed="index==0?true: false" :min-width="index==0?180: 100"
                             :prop="item.field" :label="item.name"
                             align="center" header-align="center" show-overflow-tooltip/>
          </template>


        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup>
import echarts from 'echarts'
import {biAchievementPortraitAPI} from '/src/api/bi/customerPortrayal'
import {useBaseHook} from "@/views/bi/mixins/useBaseHook.js";

defineOptions({
  /** 客户画像分析 */
  name: 'CustomerPortrayalStatisticsComponent',
})


const props = defineProps({
  statisticsType: {
    type: String,
    default: "source"
  }
})

const optionData = reactive({
  loading: false,
  axisOption: null,

  list: [],
  type: '', // 类型 source：客户来源；industry：客户行业；level：客户级别

  postParams: {},
  fieldList: []
})

const {loading, axisOption, list, type, postParams, fieldList} = toRefs(optionData)


const {baseOption, FiltrateHandleView} = useBaseHook()

const filterTitle = computed(() => {
  return {
    source: '客户来源分析',
    industry: '客户行业分析',
    level: '客户级别分析'
  }[optionData.type] || ''
})


watch(() => props.statisticsType, (val) => {
  console.log("statisticsType", val)
  optionData.type = val
}, {
  immediate: true
})

onMounted(() => {
  initAxis()
  getDataList(optionData.postParams)
})

function getDataList(params) {
  console.log("getDataList", optionData)

  optionData.postParams = params
  optionData.loading = true
  params.type_analyse = optionData.type

  console.log("getDataList", params)

  biAchievementPortraitAPI(params).then(res => {
    console.log("res",res)
    optionData.loading = false

    // 图表信息
    const allData = []
    const dealData = []
    const legendData = []

    // 表信息
    const list = [      {
        name: '所有客户（个）'
      },      {
        name: '成交客户（个）'
      }
    ]
    const fieldList = [      {
        field: 'name',
        name: {
          source: '客户来源',
          industry: '客户行业',
          level: '客户级别'
        }[optionData.type]
      }
    ]

    for (let eIndex = 0; eIndex < res.data.data.length; eIndex++) {
      const element = res.data.data[eIndex]
      // 图表信息
      allData.push({
        name: element[optionData.type],
        value: element.allCustomer
      })
      dealData.push({
        name: element[optionData.type],
        value: element.dealCustomer
      })
      legendData.push(element[optionData.type])

      // 处理表头逻辑
      const fieldKey = 'value' + eIndex
      if (fieldList.length <= res.data.data.length) {
        fieldList.push({
          field: fieldKey,
          name: element[optionData.type]
        })
      }
      const keys = ['allCustomer', 'dealCustomer']
      for (let keyIndex = 0; keyIndex < keys.length; keyIndex++) {
        const keyElement = keys[keyIndex]
        list[keyIndex][fieldKey] = element[keyElement]
      }
    }

    // 图表展示
    optionData.axisOption.legend.data = legendData

    optionData.axisOption.series[0].data = allData
    optionData.axisOption.series[1].data = dealData

    baseOption.chartObj.setOption(optionData.axisOption, true)

    // 列表展示
    optionData.fieldList = fieldList
    optionData.list = list
  }).catch(() => {
    optionData.loading = false
  })
}

/** 柱状图 */
function initAxis() {
  baseOption.chartObj = echarts.init(document.getElementById('axismain'))
  optionData.axisOption = getChartOptione()
  baseOption.chartObj.setOption(optionData.axisOption, true)
}

function getChartOptione() {
  return {
    title: [      {
        text: '全部客户',
        x: '20%',
        bottom: '25'
      },      {
        text: '成交客户',
        x: '70%',
        bottom: '25'
      }
    ],
    color: baseOption.chartColors,
    toolbox: baseOption.toolbox,
    tooltip: {
      trigger: 'item',
      formatter: '{b} : {c}'
    },
    legend: {
      x: 'center',
      y: 'bottom',
      type: 'scroll',
      data: []
    },
    series: [      {
        name: '全部客户',
        type: 'pie',
        radius: ['35%', '50%'],
        center: ['25%', '50%'],
        data: []
      },      {
        name: '成交客户',
        type: 'pie',
        radius: ['35%', '50%'],
        center: ['75%', '50%'],
        data: []
      }
    ]
  }
}


</script>

<script>


export default {

  // mixins: [BaseMixin],
  props: {},
  data() {
    return {}
  },
  computed: {},

  mounted() {

  },
  // beforeRouteUpdate(to, from, next) {
  //   this.type = to.params.type
  //   this.getDataList(this.postParams)
  //   next()
  // },
  methods: {}
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import '../styles/detail.scss';

.axis-content {
  #axismain {
    height: 420px;
  }
}
</style>
